<template>
  <div class="user-analysis-screen" :class="{ 'fullscreen-mode': isFullscreen }" :style="screenStyle">
    <!-- 大屏标题 -->
    <div class="screen-header">
      <div class="header-decoration left"></div>
      <h1 class="screen-title">用户行为分析大屏</h1>
      <div class="header-decoration right"></div>
      <div class="header-controls">
        <FullscreenButton />
        <div class="current-time">{{ currentTime }}</div>
      </div>
    </div>

    <!-- 用户概览指标 -->
    <div class="user-overview">
      <BorderBox type="2" class="overview-card">
        <DigitalFlop
          :value="userMetrics.totalUsers"
          title="总用户数"
          unit="万"
          :fontSize="40"
          color="#00d4ff"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="1" class="overview-card">
        <DigitalFlop
          :value="userMetrics.activeUsers"
          title="活跃用户"
          unit="万"
          :fontSize="40"
          color="#00ff88"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="3" class="overview-card">
        <DigitalFlop
          :value="userMetrics.newUsers"
          title="新增用户"
          unit="人"
          :fontSize="40"
          color="#ff6b6b"
        />
      </BorderBox>

      <BorderBox type="2" class="overview-card">
        <WaterLevel
          :value="userMetrics.retentionRate"
          title="用户留存率"
          :size="100"
          :colors="['#8b5cf6', '#6366f1']"
        />
      </BorderBox>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-main">
      <!-- 左侧：用户画像 -->
      <div class="analysis-left">
        <div class="left-charts">
          <BorderBox type="1" class="chart-box age-chart">
            <div class="chart-container">
              <h3 class="chart-title">用户年龄分布</h3>
              <div ref="ageDistChart" class="chart-content"></div>
            </div>
          </BorderBox>

          <BorderBox type="3" class="chart-box gender-chart">
            <div class="chart-container">
              <h3 class="chart-title">性别分布</h3>
              <div ref="genderChart" class="chart-content"></div>
            </div>
          </BorderBox>
        </div>
      </div>

      <!-- 中间：地域分布和用户行为 -->
      <div class="analysis-center">
        <BorderBox type="2" class="chart-box geo-chart">
          <div class="chart-container">
            <h3 class="chart-title">用户地域分布</h3>
            <div ref="geoChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>

      <!-- 右侧：用户行为和活跃度 -->
      <div class="analysis-right">
        <div class="right-charts">
          <BorderBox type="4" class="chart-box behavior-chart">
            <div class="chart-container">
              <h3 class="chart-title">用户行为漏斗</h3>
              <div ref="behaviorChart" class="chart-content"></div>
            </div>
          </BorderBox>

          <BorderBox type="1" class="chart-box activity-chart">
            <div class="chart-container">
              <h3 class="chart-title">活跃时段分布</h3>
              <div ref="activityChart" class="chart-content"></div>
            </div>
          </BorderBox>
        </div>
      </div>
    </div>

    <!-- 底部数据表格 -->
    <div class="data-table-section">
      <BorderBox type="2" class="table-box">
        <div class="table-container">
          <h3 class="chart-title">用户活跃度排行</h3>
          <ScrollBoard
            :data="userRankingData"
            :headers="['排名', '用户ID', '姓名', '活跃度', '消费金额', '最后登录']"
            :columnWidths="['10%', '15%', '15%', '15%', '20%', '25%']"
            :visibleRows="6"
            :rowHeight="32"
            :scrollSpeed="4000"
            :headerHeight="40"
          />
        </div>
      </BorderBox>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BorderBox from './components/BorderBox.vue'
import DigitalFlop from './components/DigitalFlop.vue'
import WaterLevel from './components/WaterLevel.vue'
import ScrollBoard from './components/ScrollBoard.vue'
import FullscreenButton from './components/FullscreenButton.vue'
import { useScreenAdapter } from './utils/adapter'
import { addAnimationStyles } from './utils/animation'
import { useFullscreen } from './composables/useFullscreen'

// 全屏控制
const { isFullscreen } = useFullscreen()

// 大屏适配
const { scale } = useScreenAdapter()

// 计算屏幕样式
const screenStyle = computed(() => {
  if (isFullscreen.value) {
    return {
      // 全屏模式下不使用缩放，让CSS样式完全控制
      transform: 'none',
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100vw',
      height: '100vh',
      zIndex: 9999
    }
  } else {
    return {
      transform: 'scale(1)',
      width: '100%',
      height: 'auto',
      minHeight: '800px'
    }
  }
})

// 响应式数据
const currentTime = ref('')
const ageDistChart = ref(null)
const genderChart = ref(null)
const geoChart = ref(null)
const behaviorChart = ref(null)
const activityChart = ref(null)
let ageDistInstance = null
let genderInstance = null
let geoInstance = null
let behaviorInstance = null
let activityInstance = null
let timeTimer = null

// 用户指标数据
const userMetrics = ref({
  totalUsers: 125.6,
  activeUsers: 89.3,
  newUsers: 1234,
  retentionRate: 78.5
})

// 用户排行数据
const userRankingData = ref([
  ['1', 'U001234', '张三', '98%', '¥12,580', '2024-01-15 14:30'],
  ['2', 'U001235', '李四', '95%', '¥11,200', '2024-01-15 13:45'],
  ['3', 'U001236', '王五', '92%', '¥9,800', '2024-01-15 12:20'],
  ['4', 'U001237', '赵六', '89%', '¥8,650', '2024-01-15 11:15'],
  ['5', 'U001238', '钱七', '87%', '¥7,890', '2024-01-15 10:30'],
  ['6', 'U001239', '孙八', '85%', '¥6,750', '2024-01-15 09:45'],
  ['7', 'U001240', '周九', '82%', '¥5,920', '2024-01-15 08:20'],
  ['8', 'U001241', '吴十', '80%', '¥5,100', '2024-01-15 07:15']
])

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 初始化年龄分布图表
const initAgeDistChart = () => {
  if (!ageDistChart.value) return

  ageDistInstance = echarts.init(ageDistChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      textStyle: { color: '#ffffff', fontSize: 12 }
    },
    series: [{
      name: '年龄分布',
      type: 'pie',
      radius: ['30%', '60%'],
      center: ['60%', '50%'],
      data: [
        { value: 25, name: '18-25岁', itemStyle: { color: '#00d4ff' } },
        { value: 35, name: '26-35岁', itemStyle: { color: '#00ff88' } },
        { value: 20, name: '36-45岁', itemStyle: { color: '#ff6b6b' } },
        { value: 15, name: '46-55岁', itemStyle: { color: '#ff9500' } },
        { value: 5, name: '55岁以上', itemStyle: { color: '#8b5cf6' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        color: '#ffffff',
        fontSize: 11
      },
      labelLine: {
        lineStyle: { color: '#ffffff' }
      }
    }]
  }
  
  ageDistInstance.setOption(option)
}

// 初始化性别分布图表
const initGenderChart = () => {
  if (!genderChart.value) return

  genderInstance = echarts.init(genderChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    },
    series: [{
      name: '性别分布',
      type: 'pie',
      radius: ['30%', '80%'],
      center: ['50%', '50%'],
      data: [
        {
          value: 58,
          name: '女性',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: '#ff6b6b' },
              { offset: 1, color: '#ff4757' }
            ])
          }
        },
        {
          value: 42,
          name: '男性',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: '#00d4ff' },
              { offset: 1, color: '#0099cc' }
            ])
          }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        color: '#ffffff',
        fontSize: 14,
        fontWeight: 'bold',
        formatter: '{b}\n{c}%'
      },
      labelLine: {
        lineStyle: { color: '#ffffff' }
      }
    }]
  }

  genderInstance.setOption(option)
}

// 初始化地域分布图表
const initGeoChart = () => {
  if (!geoChart.value) return

  geoInstance = echarts.init(geoChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return `${params.name}<br/>用户数量: ${params.value}万人<br/>占比: ${((params.value / 650) * 100).toFixed(1)}%`
      }
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.2,
      center: [104.114129, 35.550339],
      itemStyle: {
        borderColor: '#00d4ff',
        borderWidth: 1,
        areaColor: '#1a2332'
      },
      emphasis: {
        itemStyle: {
          areaColor: '#00ff88'
        }
      }
    },
    visualMap: {
      min: 0,
      max: 100,
      left: '5%',
      bottom: '10%',
      text: ['高', '低'],
      textStyle: { color: '#ffffff', fontSize: 12 },
      inRange: {
        color: ['#1a2332', '#2d4a6b', '#4a7ba7', '#00d4ff', '#00ff88']
      },
      calculable: true
    },
    series: [{
      name: '用户分布',
      type: 'map',
      map: 'china',
      roam: false,
      zoom: 1.2,
      center: [104.114129, 35.550339],
      label: {
        show: true,
        color: '#ffffff',
        fontSize: 10
      },
      itemStyle: {
        borderColor: '#00d4ff',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: '#00ff88',
          borderWidth: 2
        }
      },
      data: [
        { name: '北京市', value: 95 },
        { name: '上海市', value: 88 },
        { name: '广东省', value: 92 },
        { name: '浙江省', value: 76 },
        { name: '江苏省', value: 82 },
        { name: '山东省', value: 65 },
        { name: '河南省', value: 58 },
        { name: '四川省', value: 52 },
        { name: '湖北省', value: 48 },
        { name: '湖南省', value: 45 },
        { name: '福建省', value: 42 },
        { name: '安徽省', value: 38 },
        { name: '江西省', value: 35 },
        { name: '重庆市', value: 32 },
        { name: '天津市', value: 28 }
      ]
    }]
  }

  geoInstance.setOption(option)
}

// 初始化用户行为漏斗图表
const initBehaviorChart = () => {
  if (!behaviorChart.value) return

  behaviorInstance = echarts.init(behaviorChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return `${params.name}<br/>用户数: ${params.value}万<br/>转化率: ${params.data.rate}%`
      }
    },
    series: [{
      name: '用户行为漏斗',
      type: 'funnel',
      left: '10%',
      top: '10%',
      width: '80%',
      height: '80%',
      min: 0,
      max: 1000,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        fontSize: 12,
        fontWeight: 'bold',
        formatter: function(params) {
          return `${params.name}\n${params.value}万`
        }
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 14
        }
      },
      data: [
        { value: 1000, name: '访问', rate: 100, itemStyle: { color: '#00d4ff' } },
        { value: 800, name: '浏览商品', rate: 80, itemStyle: { color: '#00ff88' } },
        { value: 600, name: '加入购物车', rate: 60, itemStyle: { color: '#ffd93d' } },
        { value: 400, name: '提交订单', rate: 40, itemStyle: { color: '#ff6b6b' } },
        { value: 300, name: '完成支付', rate: 30, itemStyle: { color: '#a78bfa' } },
        { value: 200, name: '确认收货', rate: 20, itemStyle: { color: '#34d399' } }
      ]
    }]
  }

  behaviorInstance.setOption(option)
}

// 初始化活跃时段分布图表
const initActivityChart = () => {
  if (!activityChart.value) return

  activityInstance = echarts.init(activityChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '8%',
      right: '5%',
      bottom: '15%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
      axisLine: { lineStyle: { color: '#00ff88' } },
      axisLabel: {
        color: '#ffffff',
        fontSize: 10,
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#00ff88' } },
      axisLabel: { color: '#ffffff', fontSize: 10 },
      splitLine: { lineStyle: { color: 'rgba(0, 255, 136, 0.2)' } }
    },
    series: [{
      name: '活跃用户数',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      data: [120, 80, 60, 180, 320, 280, 450, 380],
      itemStyle: {
        color: '#00ff88'
      },
      lineStyle: {
        color: '#00ff88',
        width: 3
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0, 255, 136, 0.3)' },
          { offset: 1, color: 'rgba(0, 255, 136, 0.1)' }
        ])
      },
      emphasis: {
        itemStyle: { color: '#00d4ff' }
      }
    }]
  }

  activityInstance.setOption(option)
}

// 统一初始化所有图表
const initAllCharts = () => {
  initAgeDistChart()
  initGenderChart()
  initGeoChart()
  initBehaviorChart()
  initActivityChart()
}

// 生命周期
onMounted(() => {
  addAnimationStyles()
  updateTime()
  timeTimer = setInterval(updateTime, 1000)

  setTimeout(() => {
    initAllCharts()
  }, 100)
})

onUnmounted(() => {
  if (timeTimer) clearInterval(timeTimer)
  if (ageDistInstance) ageDistInstance.dispose()
  if (genderInstance) genderInstance.dispose()
  if (geoInstance) geoInstance.dispose()
  if (behaviorInstance) behaviorInstance.dispose()
  if (activityInstance) activityInstance.dispose()
})
</script>

<style>
/* 全屏模式全局样式 - 必须在非scoped样式中 */
body.fullscreen-active {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%) !important;
}

html.fullscreen-active {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%) !important;
}
</style>

<style scoped>
.header-controls {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-analysis-screen {
  width: 1920px;
  height: 1080px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  transform-origin: 0 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 全屏模式样式 */
.user-analysis-screen.fullscreen-mode {
  padding: 8px !important;
  margin: 0 !important;
  box-sizing: border-box;
  height: 100vh !important;
  width: 100vw !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%) !important;
  overflow: hidden !important;
  transform: none !important;
}

.user-analysis-screen.fullscreen-mode .screen-header {
  height: 50px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}

.user-analysis-screen.fullscreen-mode .screen-title {
  font-size: 28px;
}

.user-analysis-screen.fullscreen-mode .current-time {
  font-size: 14px;
  padding: 6px 12px;
}

.user-analysis-screen.fullscreen-mode .user-overview {
  margin: 0 8px 8px;
  flex: 0 0 160px;
  gap: 15px;
}

.user-analysis-screen.fullscreen-mode .analysis-main {
  margin: 0 8px 8px;
  flex: 1;
  gap: 15px;
  min-height: 0;
}

.user-analysis-screen.fullscreen-mode .data-table-section {
  margin: 0 8px 8px;
  flex: 0 0 180px;
}

.user-analysis-screen.fullscreen-mode .analysis-left,
.user-analysis-screen.fullscreen-mode .analysis-right {
  flex: 0 0 25%;
  gap: 12px;
}

.user-analysis-screen.fullscreen-mode .analysis-center {
  flex: 0 0 50%;
  min-width: 0;
}

/* 普通模式样式 */
.user-analysis-screen:not(.fullscreen-mode) {
  width: 100%;
  height: 100vh;
  min-height: 900px;
  padding: 20px;
  box-sizing: border-box;
}

.user-analysis-screen:not(.fullscreen-mode) .screen-header {
  margin-bottom: 15px;
}

.user-analysis-screen:not(.fullscreen-mode) .screen-title {
  font-size: 28px;
}

.user-analysis-screen:not(.fullscreen-mode) .user-overview {
  margin: 0 0 20px;
}

.user-analysis-screen:not(.fullscreen-mode) .analysis-main {
  margin: 0 0 20px;
  flex: 1;
}

.user-analysis-screen:not(.fullscreen-mode) .data-table-section {
  margin: 0;
  flex: 0 0 auto;
}

.user-analysis-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 30%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  position: relative;
  margin-bottom: 20px;
  flex: 0 0 auto;
}

.header-decoration {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
}

.screen-title {
  font-size: 36px;
  font-weight: bold;
  margin: 0 40px;
  text-align: center;
  background: linear-gradient(135deg, #00ff88, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.current-time {
  font-size: 18px;
  color: #ffffff !important;
  font-family: 'Monaco', monospace;
  background: rgba(0, 255, 136, 0.2);
  padding: 8px 16px;
  border: 1px solid rgba(0, 255, 136, 0.4);
  border-radius: 6px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 136, 0.3);
}

.user-overview {
  display: flex;
  justify-content: space-between;
  margin: 0 20px 20px;
  gap: 20px;
  flex: 0 0 auto;
}

.overview-card {
  flex: 1;
  height: 100%;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
}

.card-title {
  font-size: 18px !important;
  color: #ffffff !important;
  margin-bottom: 10px;
  opacity: 0.8;
}

.card-value {
  font-size: 32px;
  font-weight: bold;
  color: #00ff88;
  margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.card-unit {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.6;
}

/* DigitalFlop组件标题样式强制覆盖 */
.overview-card .digital-title {
  font-size: 18px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
}

.user-analysis-screen.fullscreen-mode .overview-card .digital-title {
  font-size: 20px !important;
}

/* WaterLevel组件在用户分析页面中的样式调整 */
.user-analysis-screen .overview-card .water-level {
  padding: 10px !important;
}

.user-analysis-screen .overview-card .water-level-title {
  font-size: 14px !important;
  margin-bottom: 5px !important;
}

.user-analysis-screen.fullscreen-mode .overview-card .water-level {
  padding: 8px !important;
}

.user-analysis-screen.fullscreen-mode .overview-card .water-level-title {
  font-size: 16px !important;
  margin-bottom: 8px !important;
}

/* 全屏模式下的卡片样式调整 */
.user-analysis-screen.fullscreen-mode .card-value {
  font-size: 28px;
}

.user-analysis-screen.fullscreen-mode .card-title {
  font-size: 16px !important;
}

.user-analysis-screen.fullscreen-mode .card-unit {
  font-size: 14px;
}

.analysis-main {
  display: flex;
  justify-content: space-between;
  margin: 0 20px 20px;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.analysis-left,
.analysis-right {
  flex: 0 0 25%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.analysis-center {
  flex: 0 0 50%;
  min-width: 0;
}

.left-charts,
.right-charts {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
}

.chart-box {
  flex: 1;
  min-height: 0;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.chart-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
}

.age-chart,
.behavior-chart,
.gender-chart,
.activity-chart {
  flex: 1;
}

.geo-chart {
  height: 100%;
}

.table-box {
  width: 100%;
  height: 100%;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.table-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
}

.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.user-analysis-screen .chart-title,
.user-analysis-screen h3.chart-title {
  font-size: 16px !important;
  color: #00ff88 !important;
  margin: 0 0 10px 0 !important;
  text-align: center !important;
  font-weight: bold !important;
  flex: 0 0 auto;
}

.chart-content {
  flex: 1;
  min-height: 0;
}

.data-table-section {
  margin: 0 20px 20px;
  flex: 0 0 240px;
}

.table-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  flex: 1;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  color: #ffffff;
  font-size: 12px;
}

.data-table th {
  background: rgba(0, 212, 255, 0.2);
  color: #00ff88;
  font-weight: bold;
  font-size: 13px;
}

.data-table tr:hover {
  background: rgba(0, 255, 136, 0.1);
}

.data-table td:first-child {
  color: #00d4ff;
  font-weight: bold;
}

/* 全屏模式下的表格样式调整 */
.user-analysis-screen.fullscreen-mode .data-table th,
.user-analysis-screen.fullscreen-mode .data-table td {
  padding: 6px 10px;
  font-size: 11px;
}

.user-analysis-screen.fullscreen-mode .data-table th {
  font-size: 12px;
}

/* 动画效果 */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 136, 0.3); }
  50% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.6); }
}

.chart-box:hover,
.table-box:hover,
.overview-card:hover {
  animation: glow 2s infinite;
}
</style>
